<template>
  <cb-layout
    :collapsed="collapsed"
    :handleCollapse="handleCollapse"
    :allowCache="true"
    :keepAliveList="keepAliveList"
    v-bind="settings"
    class="cb-layout">
    <template v-slot:menuRender>
      <BaseMenu
        :mode="settings.layout === 'topmenu' ? 'horizontal' : 'inline'"
        :collapsed="collapsed"
        :menus="menus"
        :theme="settings.theme"
        @menuItemClick="menuItemClick" />
    </template>
    <template v-slot:rightContentRender>
      <right-content :top-menu="settings.layout === 'topmenu'" :theme="settings.theme" />
    </template>
    <template v-slot:contentRender>
      <div class="global-content">
        <keep-alive :include="keepAliveList">
          <router-view />
        </keep-alive>
      </div>
    </template>
  </cb-layout>
</template>

<script>
import RightContent from '@/components/GlobalHeader/RightContent'
import BaseMenu from '@/components/BaseMenu'
import defaultSettings from '@/config/defaultSettings'
import LogoSvg from '../assets/logo.svg?inline'

export default {
  name: 'BasicLayout',
  components: {
    LogoSvg,
    RightContent,
    BaseMenu
  },
  data () {
    return {
      // base
      menus: [],
      collapsed: false,
      settings: {
        // 布局类型
        layout: window.__POWERED_BY_QIANKUN__ ? 'simple' : defaultSettings.layout, // 'sidemenu', 'topmenu'
        theme: defaultSettings.navTheme,
        title: defaultSettings.title
      }
    }
  },
  computed: {
    mainMenu () {
      return this.$store.getters.addRouters
    },
    keepAliveList () {
      console.log('keepAliveList', this.$getGlobalState && this.$getGlobalState('keepAliveList'))
      return (this.$getGlobalState && this.$getGlobalState('keepAliveList')) || []
    }
  },
  created () {
    const routes = this.mainMenu.find(item => item.path === '/')
    this.menus = (routes && routes.children) || []
  },
  methods: {
    handleCollapse (val) {
      this.collapsed = val
    },
    menuItemClick ({ key }) {
      console.log(key)
      this.$router.push({ path: key })
    }
  }
}
</script>

<style lang="less">
@import './BasicLayout.less';
</style>
<style lang="less" scoped>
.simple {
  padding: 16px 16px 0;
}
.global-content {
  padding: 16px 16px 0;
}
</style>
